<template>
  <view class="top-section">
    <view class="search-bar">
      <u-input
        class="search-input"
        placeholder="请输入关键词"
        v-model="searchText"
      />
    </view>
    <view class="quick-box">
      <view class="quick-access">
        <view class="icon-item" @click="onScan" v-if="showScanFeature">
          <image
            class="nav_img"
            src="/static/index/scan.png"
            mode="widthFix"
          ></image>
          <text>扫一扫</text>
        </view>
        <view class="icon-item" @click="onCertificate" v-if="showCertificate">
          <image
            class="nav_img"
            src="/static/index/drivcar.png"
            mode="widthFix"
          ></image>
          <text>电子证照</text>
        </view>
        <view class="icon-item" @click="onReminder" v-if="showReminder">
          <image
            class="nav_img"
            src="/static/index/ding.png"
            mode="widthFix"
          ></image>
          <text>提醒服务</text>
        </view>
        <view class="icon-item" @click="onMyBusiness" v-if="showMyBusiness">
          <image
            class="nav_img"
            src="/static/index/ding.png"
            mode="widthFix"
          ></image>
          <text>我的业务</text>
        </view>
        <view class="icon-item" @click="onComplaint" v-if="showComplaint">
          <image
            class="nav_img"
            src="/static/index/ding.png"
            mode="widthFix"
          ></image>
          <text>问题投诉</text>
        </view>
      </view>
    </view>
    <index-user-info></index-user-info>
  </view>
</template>

<script>
import { hasMenuPermission, MENU_ITEMS } from "@/common/permissionControl.js";
import indexUserInfo from "./index-userinfo.vue";

export default {
  components: {
    indexUserInfo,
  },
  data() {
    return {
      searchText: "",
      perCodeList: [],
    };
  },
  computed: {
    showScanFeature() {
      return hasMenuPermission(this.perCodeList, MENU_ITEMS.SCAN);
    },
    showCertificate() {
      return hasMenuPermission(this.perCodeList, MENU_ITEMS.CERTIFICATE);
    },
    showReminder() {
      return hasMenuPermission(this.perCodeList, MENU_ITEMS.REMINDER);
    },
    showMyBusiness() {
      return hasMenuPermission(this.perCodeList, MENU_ITEMS.MY_BUSINESS);
    },
    showComplaint() {
      return hasMenuPermission(this.perCodeList, MENU_ITEMS.COMPLAINT);
    },
  },
  mounted() {
    // 直接从本地存储获取 perCodeList
    this.perCodeList = uni.getStorageSync("perCodeList") || [];
    console.log("User permissions:", this.perCodeList);
  },
  methods: {
    onScan() {
      this.$router.push("/pages/scan/index");
    },
    onCertificate() {
      this.$router.push("/pages/hub_ygzw/home/zhengzhao/zzquery");
    },
    onReminder() {
      this.$router.push("/pages/hub_zsyg/message/messageinfo");
    },
    onMyBusiness() {
      this.$router.push("/pages/hub_zsyg/message/business/index");
    },
    onComplaint() {
      this.$router.push("/pages/complaint/index");
    },
  },
};
</script>

<style lang="scss" scoped>
.top-section {
  background: url("/static/index/header-bg.png");
  background-size: cover;
  border-radius: 10px;
  position: relative;
  height: 240px; // 增加高度以容纳用户信息
  width: 100%;
}

.search-bar {
  padding: 20px;
}

.search-input {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 8px;
}

.quick-box {
  position: absolute;
  width: 100%;
  right: 0;
  top: 100px;
}

.quick-access {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}

.nav_img {
  width: 32px;
  height: 32px;
}
</style>
